<template>
  <div class="bottom-view">
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">关键词搜索</div>
        </template>
        <template>
          <div class="chart-wrapper">
            <div class="chart-inner">
              <div class="chart">
                <div class="chart-title">搜索用户数</div>
                <div class="chart-data">93,333</div>
                <v-chart :options="searchUserOption" />
              </div>
              <div class="chart">
                <div class="chart-title">搜索量</div>
                <div class="chart-data">193,333</div>
                <v-chart :options="searchUserOption" />
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="tableData">
                <el-table-column prop="rank" label="排名" width="180" />
                <el-table-column prop="keyword" label="关键词" width="180" />
                <el-table-column prop="count" label="总搜索量" />
                <el-table-column prop="users" label="搜索用户数" />
              </el-table>
              <el-pagination
                layout="prev,pager,next"
                :page-size="4"
                :total="100"
                small
                background
                @current-change="onPageChange"
              />
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="view">
      <el-card shadow="hover">
        <template v-slot:header>
          <div class="title-wrapper">
            <div class="title">分类销售排行</div>
            <div class="radio-wrapper">
              <el-radio-group v-model="radioSelect" size="small">
                <el-radio-button label="品类" />
                <el-radio-button label="商品" />
              </el-radio-group>
            </div>
          </div>
        </template>
        <template>
          <div class="chart-wrapper">
            <v-chart :options="caterotyOptions" />
          </div>
        </template>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchUserOption: {
        xAxis: { type: "category", boundaryGap: false },
        yAxis: { show: false },
        grid: { left: 0, top: 0, bottom: 0, right: 0 },
        series: [
          {
            type: "line",
            areaStyle: { color: "rgba(95,187,255,.5)" },
            data: [100, 112, 133, 230, 190, 333, 44, 134, 111, 57, 88],
            lineStyle: { color: "rgba(95,187,255)" },
            itemStyle: { opacity: 0 },
            smooth: true
          }
        ]
      },
      searchNumberOption: {},
      tableData: [
        {
          id: 1,
          rank: 1,
          keyword: "北京",
          count: 100,
          users: 90,
          range: "90%"
        },
        {
          id: 2,
          rank: 2,
          keyword: "北京",
          count: 100,
          users: 90,
          range: "90%"
        },
        {
          id: 3,
          rank: 3,
          keyword: "北京",
          count: 100,
          users: 90,
          range: "90%"
        },
        {
          id: 4,
          rank: 4,
          keyword: "北京",
          count: 100,
          users: 90,
          range: "90%"
        }
      ],
      caterotyOptions: {},
      radioSelect: "品类"
    };
  },
  methods: {
    onPageChange(page) {
      console.log(page);
    },
    renderPieChart() {
      const mockData = [
        {
          legendname: "粉面粥店",
          value: 67,
          percent: "15.40%",
          name: "粉面粥店 | 15.40%"
        },
        {
          legendname: "简餐便当",
          value: 97,
          percent: "22.30%",
          name: "简餐便当 | 22.30%"
        },
        {
          legendname: "汉堡披萨",
          value: 92,
          percent: "21.15%",
          name: "汉堡披萨 | 21.15%"
        }
      ];
      this.caterotyOptions = {
        title: [
          {
            text: "品类分布",
            textStyle: { fontSize: 14, color: "#666" },
            left: 20, //顶点定位
            top: 20
          },
          {
            text: "累计订单量",
            subtext: "320",
            x: "34.5%", // 中心点定位
            y: "42.5%",
            textAlign: "center",
            textStyle: { fontSize: 14, color: "#999" },
            subtextStyle: { fontSize: 28, color: "#333" }
          }
        ],
        series: [
          {
            type: "pie",
            data: mockData,
            // pie 标签
            label: {
              normal: {
                show: true,
                position: "outter",
                formatter: function(params) {
                  return params.data.legendname;
                }
              }
            },
            // 图的中心点，给右边留地方
            center: ["35%", "50%"],
            // pie 中心 编程空的, 数组的第一项是内半径，第二项是外半径。
            radius: ["45%", "60%"],
            // label 上线的长度
            labelLine: { nomal: { length: 5, length2: 3, smooth: true } },
            // 数据排列顺序, 默认顺序
            clockWise: true,
            itemStyle:{borderWidth:4,borderColor:"#fff"}
          }
        ],
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "70%",
          top: "middle",
          textStyle: { color: "#8c8c8c" }
        },
        tooltip: {
          trigger: "item",
          // 自定义 tooltip 显示的内容
          formatter: function(params) {
            return (
              params.marker +
              params.data.legendname +
              "<br/>" +
              "数量：" +
              params.data.value
            );
          }
        }
      };
    }
  },
  mounted() {
    this.renderPieChart();
  }
};
</script>
<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;
  .view {
    flex: 1;
    width: 50%;
    box-sizing: border-box;
    &:first-child {
      padding: 0 10px 0 0;
    }
    &:last-child {
      padding: 0 0 0 10px;
    }
    .title-wrapper {
      display: flex;
      align-items: center;
      height: 60px;
      box-sizing: border-box;
      border-bottom: 1px solid #eee;
      font-size: 14px;
      font-weight: 800;
      padding-left: 20px;
      .radio-wrapper {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        padding-right: 20px;
      }
    }
    .chart-wrapper {
      display: flex;
      flex-direction: column;
      height: 452px;
      .chart-inner {
        display: flex;
        padding: 0 10px;
        margin-top: 20px;
        .chart {
          flex: 1;
          padding: 0 10px;
          .chart-title {
            color: #999;
            font-size: 14px;
          }
          .chart-data {
            font-size: 22px;
            color: #333;
            font-weight: 800;
            letter-spacing: 1px;
          }
          .echarts {
            height: 50px;
          }
        }
      }
      .table-wrapper {
        flex: 1;
        margin-top: 20px;
        padding: 0 20px 20px;
        .el-pagination {
          display: flex;
          justify-content: flex-end;
          margin-top: 15px;
        }
      }
    }
  }
}
</style>
